//variables globales necesarias para varios scripts
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var marcadorClimaMza = [];
var polygonmza = [];
var marcadores =[];
var geocoder;
var mapa;
var poligonos;
var oms;
var infobubble = new InfoBubble(   //definimos la infobubble con valores iguales para todos los marcadores
{
    backgroundColor: '#cccccc',
    borderRadius:15,
    borderWidth: 4,
    borderColor: '#aaaaaa',
    padding:3
});

//funcion principal donde definimos el mapa y lo llenamos de marcadores
function iniciar() {
    div = document.getElementById('abrir');
    div.style.display='none';
    geocoder = new google.maps.Geocoder();
    directionsDisplay = new google.maps.DirectionsRenderer();
    var latlng = new google.maps.LatLng(-39.571822,-67.5);
    var myOptions = {   //opciones del mapa
        noClear: true,
        zoom:4,
        minZoom:4,

        center: latlng,
        mapTypeId: google.maps.MapTypeId.TERRAIN,
        mapTypeControl: false,
        navigationControl: true,
        navigationControlOptions: {
            position: google.maps.ControlPosition.LEFT_TOP,
            style: google.maps.NavigationControlStyle.DEFAULT
        },
        keyboardShortcuts: false,
        scaleControl: true,
        streetViewControl: false

    };
    //Mostramos el mapa en un div llamado "map"
    mapa = new google.maps.Map(document.getElementById("map"), myOptions);
    //añadimos la barra negra a los controles asi se desplaza hacia abajo
    mapa.controls[google.maps.ControlPosition.TOP_LEFT].push(document.getElementById('barranegra'));





    $.getJSON("js/poligonos.json", function(pol){       //traemos datos de poligonos del JSon poligonos.json
        $.each(pol.polygons, function(i){
            poligonos = this;
        });
        var puntos = [poligonos.poliExterno,poligonos.poliInterno];
        var polygon = new google.maps.Polygon({
            paths: puntos,
            map: mapa,
            strokeOpacity: 0,
            strokeWeight: 1,
            fillOpacity: 0.6
        });
        //Definimos un poliinterno y un poliexterno para mostrar solamente el mapa de mendoza destacado
        var puntos2 = [poligonos.poliExterno2,poligonos.poliInterno2];
        var polygon2 = new google.maps.Polygon({
            paths: puntos2,
            map: mapa,
            strokeOpacity: 0,
            strokeWeight: 1,
            fillOpacity: 0.35
        });

            var z=0;
        var colores = ["#FF3FFA","#FF3FFA","#FF3FFA","#FF3FFA","#FF3FFA","#1973F1","#19F14C","#FAB700","#019F26","#019F26","#1973F1","#1973F1","#FAB700","#FAB700"];
        for (i in poligonos){
        
            polygonmza[i] = new google.maps.Polygon({
                paths: poligonos[i],
                fillColor: colores[z],
                strokeColor: "#FFE7A1",
                strokeOpacity: 50,
                strokeWeight: 5,
                fillOpacity: 0.30
            });
            
            z=z+1;
        }
        
    });


    oms = new OverlappingMarkerSpiderfier(mapa);   //declaramos la variable oms que sirve para desplazar loa marcadores cuando se superponen

    $.getJSON("js/marcadores.json",function(data){        //traemos todos los datos para nuestros marcadores del JSon marcadores.json
        $.each(data, function(i){
            var datos = this;
            var pointito = new google.maps.LatLng(datos.lat,datos.lng);
            var marcador = new google.maps.Marker({
                position: pointito,
                title: datos.title,
                icon: datos.icon1,
                icon1: datos.icon1,
                icon2: datos.icon2,
                lat:datos.lat,
                lng:datos.lng,
                map: mapa,
                category: datos.category
            });


            marcador.infoContent =

            '<div id="info">' +
            '<img src="'+ datos.imagen + '" />' +
            '<h3>'+ datos.title +'</h3>' + datos.contenido +
            '<p><a href="'+ datos.url +'"target="_blank" >seguir leyendo...</a></p>' +
            '</div>'
            ;

            marcador.setVisible(false);

            

          
            marcadores.push(marcador);    //guardamos los marcadores en un array


        });
        for (i in marcadores){
            oms.addMarker(marcadores[i]);   //los agregamos todos a oms que es el encargado de mostrarlos y separarlos si se superponen
        }

        oms.addListener('click', function(x) {    //agregamos listeners para cada marcador para que muestren su infobubble al hacerles click
            infobubble.setContent(x.infoContent);    //asignamos los contenidos de las infobbubles de cada marcador
            infobubble.open(mapa, x);
        });
    });


    google.maps.event.addListener(mapa, 'zoom_changed', function() {  //ponemos un listener del zoom para que cuando sea mayor a 13 muestre unos iconos especiales en los marcadores de ciudad

        if (mapa.getZoom() > 13) {
            for (var i = 0; i < marcadores.length; i++) {
                marcadores[i].setIcon(marcadores[i].icon2);
            }
        }
        if (mapa.getZoom() <= 13) {
            for (i = 0; i < marcadores.length; i++) {
                marcadores[i].setIcon(marcadores[i].icon1);
            }
        }
    });



    crear(); //llamamos a la funcion crear() del script menu que crea nuestro menu de categorias en la pagina
    setTimeout ("mapa.setCenter(new google.maps.LatLng(-34.777716,-68.455811)); mapa.minZoom=7; clima()", 5000); //ponemos un timeout para que se vea el contexto del mapa y luego se haga un zoom en Mendoza
    directionsDisplay.setMap(mapa);
}



	